import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, ScrollView } from 'react-native'
import * as _ from 'lodash'
import { WhiteSpace, Tag, Modal, ActivityIndicator } from 'antd-mobile'
import Spinner from 'react-native-loading-spinner-overlay'
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import {connect} from 'react-redux'
import { createAction, NavigationActions } from '../../../utils'
import screen from '../../../utils/screen'
import { OwnCard, Tip } from '../widgets'
import { PullView, ViewMoreText } from '../../../widgets'

@connect(({ statistics, loading }) => ({ ...statistics, isLoading: loading.models.statistics}))
export default class extends PureComponent {
  constructor(props) {
    super(props)
  }

  componentWillMount() {
    this.props.dispatch(createAction("statistics/initState")({}))
  }

  componentDidMount() {
    const mainTime= this.props.mainTime;
    this.invokeFefchData(mainTime.startTime, mainTime.endTime)
  }

  componentWillReceiveProps(nextProps) {
    const mainTime= this.props.mainTime;
    const nextMainTime = nextProps.mainTime;
    if(nextMainTime.startTime === undefined || nextMainTime.endTime === undefined) {
      return false
    }
    if(nextMainTime.startTime !== mainTime.startTime || nextMainTime.endTime !== mainTime.endTime) {
      this.invokeFefchData(nextMainTime.startTime, nextMainTime.endTime)
    }
  }

  invokeFefchData = (sTime, eTime ) => {
    const { mainTime } = this.props;
    // 获取资产负债表概述
    const params = {
      startTime: sTime,
      endTime: eTime,
      modeArea: 10001,
      reportType: 1
    }
    this.props.dispatch(createAction("statistics/getTmodeContentMsg")(params))
  }

  renderYingLi = () => {
    const tableHead = ['', '本期', '上年同期', '增减比例'];
    const tableTitle = ['营业收入', '营业成本', '毛利', '毛利率', '净利润', '净利润率'];
    const tableData = this.props.ylTable
    return (
      <View >
        <Table borderStyle={{borderWidth: 1, borderColor: '#bfbfbf' }}>
          <Row data={tableHead} flexArr={[1.5, 1, 1, 1]} style={styles.head} textStyle={styles.text}/>
          <TableWrapper style={{flexDirection: 'row'}}>
            <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
            <Rows data={tableData} flexArr={[1, 1, 1]} style={styles.row}/>
          </TableWrapper>
        </Table>
      </View>
    )
  }

  renderChangZhai = () => {
    const tableHead = ['', '本期', '上年同期', '增减比例'];
    const tableTitle = ['资产总计', '负债总计', '净资产总计', '资产负债率', '流动比率'];
    const tableData = this.props.czTable;
    return (
      <View>
        <Table borderStyle={{borderWidth: 1, borderColor: '#bfbfbf' }}>
          <Row data={tableHead} flexArr={[1.5, 1, 1, 1]} style={styles.head} textStyle={styles.text}/>
          <TableWrapper style={{flexDirection: 'row'}}>
            <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
            <Rows data={tableData} flexArr={[1, 1, 1]} style={styles.row}/>
          </TableWrapper>
        </Table>
      </View>
    )
  }

  renderYingYun = () => {
    const tableHead = ['', '本期', '上年同期', '增减比例'];
    const tableTitle = ['经营活动产生的现金流净额', '应收账款周转率', '存货周转率'];
    const tableData = this.props.yyTable;
    return (
      <View>
        <Table borderStyle={{borderWidth: 1, borderColor: '#bfbfbf' }}>
          <Row data={tableHead} flexArr={[1.5, 1, 1, 1]} style={styles.head} textStyle={styles.text}/>
          <TableWrapper style={{flexDirection: 'row'}}>
            <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
            <Rows data={tableData} flexArr={[1, 1, 1]} style={styles.row}/>
          </TableWrapper>
        </Table>
      </View>
    )
  }

  renderChengZhang = () => {
    const tableHead = ['', '本期', '上年同期', '增减比例'];
    const tableTitle = ['总资产增长率', '营业收入增长率', '净利润增长率'];
    const tableData = this.props.czqkTable;
    return (
      <View>
        <Table borderStyle={{borderWidth: 1, borderColor: '#bfbfbf' }}>
          <Row data={tableHead} flexArr={[1.5, 1, 1, 1]} style={styles.head} textStyle={styles.text}/>
          <TableWrapper style={{flexDirection: 'row'}}>
            <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
            <Rows data={tableData} flexArr={[1, 1, 1]} style={styles.row}/>
          </TableWrapper>
        </Table>
      </View>
    )
  }


  render() {
    const { zichanGS, lirunGS, xjllGS, ylDetail,czDetail,yyDetail,czqkDetail, mainTime, isLoading } = this.props;
    return (
        <PullView onPullRelease={() => {
          this.invokeFefchData(mainTime.startTime, mainTime.endTime)
        }}>
          <Spinner visible={isLoading}/>
          <Tip content="概述" />
          <OwnCard title="利润表" extra="报表明细" extraOnPress={() => {
            this.props.navigation.navigate('ProfitStack',{
              initTime: mainTime
            })
          }}>
            <ViewMoreText>{lirunGS}</ViewMoreText>
          </OwnCard>
          <OwnCard title="资产负债表" extra="报表明细" extraOnPress={() => {
            this.props.navigation.navigate('AssetLiabilityStack', {
              initTime: mainTime
            })
          }}>
            <ViewMoreText>{zichanGS}</ViewMoreText>
          </OwnCard>
          <OwnCard title="现金流量表" extra="报表明细" extraOnPress={() => {
            this.props.navigation.navigate('CashFlowStack', {
              initTime: mainTime
            })
          }}>
            <ViewMoreText>{xjllGS}</ViewMoreText>
          </OwnCard>
          {/*<WhiteSpace/>*/}
          {/*<Tip content="详情" />*/}
          {/*<OwnCard title="盈利能力">*/}
            {/*{*/}
              {/*this.renderYingLi()*/}
            {/*}*/}
            {/*<View style={{height: screen.pxToDp(30)}}></View>*/}
            {/*<ViewMoreText>{ylDetail}</ViewMoreText>*/}
          {/*</OwnCard>*/}
          {/*<OwnCard title="偿债能力">*/}
            {/*{*/}
              {/*this.renderChangZhai()*/}
            {/*}*/}
            {/*<View style={{height: screen.pxToDp(30)}}></View>*/}
            {/*<ViewMoreText>{czDetail}</ViewMoreText>*/}
          {/*</OwnCard>*/}
          {/*<OwnCard title="营运情况">*/}
            {/*{*/}
              {/*this.renderYingYun()*/}
            {/*}*/}
            {/*<View style={{height: screen.pxToDp(30)}}></View>*/}
            {/*<ViewMoreText>{yyDetail}</ViewMoreText>*/}
          {/*</OwnCard>*/}
          {/*<OwnCard title="成长情况">*/}
            {/*{*/}
              {/*this.renderChengZhang()*/}
            {/*}*/}
            {/*<View style={{height: screen.pxToDp(30)}}></View>*/}
            {/*<ViewMoreText>{czqkDetail}</ViewMoreText>*/}
          {/*</OwnCard>*/}
        </PullView>
    )
  }
}

const styles = StyleSheet.create({
  head: { height: 40, backgroundColor: '#FFF' },
  title: { flex: 1.5, backgroundColor: '#FFF' },
  row: { height: 28 },
  text: { textAlign: 'center' }
})
